<template>
  <div class="duty">
    <div class="header">值班表</div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="handleHeaderCell"
      >
        <el-table-column prop="date" min-width="20%">
          <template>
            <div
              style="
                height: 15vh;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <span style="margin-top: 8vh">值班人员</span>
              <span style="margin-top: -8vh">日期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="40%"
          prop="name"
          :label="today"
        ></el-table-column>
        <el-table-column
          min-width="40%"
          prop="name"
          :label="tomorrow"
        ></el-table-column>
      </el-table>
      <div
        class="line"
        :style="{
          width: lineWhide + 'px',
          transform: 'rotate(' + lineDeg + 'deg)',
        }"
      ></div>
      <div class="riqi1">日期</div>
      <div class="zhiban">值班人员</div>
      <div class="info1">
        <div class="item1">
          <div class="user_info box1">值班领导</div>
          <div class="user_info box2">值班民警</div>
          <div class="user_info box2">值班辅警</div>
        </div>
        <div class="item2">
          <div class="user_info box1">
            <div
              v-for="(item, index) in ld"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name1"
            >
              {{ item }}
            </div>
          </div>
          <div class="user_info box2">
            <div
              v-for="(item, index) in mj"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name2"
            >
              {{ item }}
            </div>
          </div>
          <div class="user_info box3">
            <div
              v-for="(item, index) in fj"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name2"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="item2">
          <div class="user_info box1">
            <div
              v-for="(item, index) in ld1"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name1"
            >
              {{ item }}
            </div>
          </div>
          <div class="user_info box2">
            <div
              v-for="(item, index) in mj1"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name1"
            >
              {{ item }}
            </div>
          </div>
          <div class="user_info box3">
            <div
              v-for="(item, index) in fj1"
              :key="index"
              :class="item.length < 3 ? 'lp' : ''"
              class="name2"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //第一个单元格的类名
      firstCellClassName: "",
      //第一个单元格的宽度
      firstCellWidth: 0,
      //第一个单元格的高度
      firstCellHeight: 0,
      //对角线的宽度
      lineWhide: 0,
      //对角线的角度
      lineDeg: 0,
      //窗口宽度
      screenWidth: document.body.clientWidth,
      timer: null,
      tableData: [],

      // 数据
      ZBlist: [],
      // 日期
      today: "",
      tomorrow: "",
      // 人员
      ld: [],
      mj: [],
      fj: [],
      ld1: [],
      mj1: [],
      fj1: [],
    };
  },
  watch: {
    //监听窗口的变化 变了之后
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        this.timer = true;
        // setTimeout(function(){
        this.getsElement();
        // })
      }
    },
  },
  mounted() {
    this.list();
    setInterval(() => {
      this.list();
    }, 600000);
    //窗口或框架被调整大小时发生
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth;
      };
    };
  },
  methods: {
    list() {
      this.today = "";
      this.tomorrow = "";
      this.ld = [];
      this.mj = [];
      this.fj = [];
      this.ld1 = [];
      this.mj1 = [];
      this.fj1 = [];
      axios
        .get("/duty/getDutyList.do")
        .then((res) => {
          console.log(res.data)
          this.ZBlist = res.data;
          this.today = this.ZBlist.todayList[0].RQ;
          this.tomorrow = this.ZBlist.tomorrowList[0].RQ;
          res.data.todayList.forEach((item) => {
            if (item.RYLB == 1) {
              this.ld.push(item.XM);
            } else if (item.RYLB == 2) {
              this.mj.push(item.XM);
            } else {
              this.fj.push(item.XM);
            }
          });
          res.data.tomorrowList.forEach((item) => {
            if (item.RYLB == 1) {
              this.ld1.push(item.XM);
            } else if (item.RYLB == 2) {
              this.mj1.push(item.XM);
            } else {
              this.fj1.push(item.XM);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleHeaderCell({ row, rowIndex }) {
      //如果使用的多级表头  就需要判断是第几个表头
      if (rowIndex == 0) {
        //获取第一个单元格的class类名
        this.firstCellClassName = row[0].id;
        //获取第一个单元格的宽度，这个方法直接返回了
        this.firstCellWidth = row[0].realWidth;
        //这个时候他是找不到元素的  所以在调用一次
        this.$nextTick(() => {
          this.getsElement();
        });
      }
      // console.log(this.firstCellClassName, this.firstCellWidth, "查看类名");
    },
    getsElement() {
      //用原生获取第一个单元格的高度
      var a = document.getElementsByClassName(this.firstCellClassName)[0];
      this.firstCellHeight = a.offsetHeight;
      //获取对角线的长度 a²+b²=c²
      this.lineWhide = Math.sqrt(
        this.firstCellWidth * this.firstCellWidth +
          this.firstCellHeight * this.firstCellHeight
      );
      //获取对角线旋转的角度
      this.lineDeg =
        (Math.atan(this.firstCellHeight / this.firstCellWidth) * 180) / Math.PI;
      // console.log(this.firstCellHeight, "查看高度");
      // console.log(this.lineWhide, "对角线宽度");
      // console.log(this.lineDeg, "角度");
    },
  },
};
</script>


<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

::v-deep(.el-table th) {
  // width: 10vw;
  height: 20vh;
  font-size: 3vw;
  font-weight: 400;
  color: #ffd969;
  border-right: 1px solid #00b0f0 !important;
  background-color: transparent !important;
}
::v-deep(.el-table) {
  border-right: 1px solid #00b0f0 !important;
  --el-table-border-color: transparent !important;
}
::v-deep(.el-table th > .cell) {
  text-align: center;
}
::v-deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: 1px solid #00b0f0 !important;
}
::v-deep(.el-table__body-wrapper) {
  display: none;
}
// .el-table_11_column_31 {
//   font-size: 4vw !important;
//   color: red !important;
// }
::v-deep(.el-table th > .cell) {
  height: 15vh;
  line-height: 15vh;
  background-color: transparent !important;
}
::v-deep(.el-table th, .el-table tr) {
  background-color: transparent !important;
}
::v-deep(.el-table, .el-table__expanded-cell) {
  background-color: transparent !important;
}
//透明化行、单元格
::v-deep(el-table th, .el-table tr, .el-table td) {
  background-color: transparent !important;
}

::v-deep(.el-table, .el-table__expanded-cell) {
  background-color: transparent;
}
::v-deep(.el-table tr) {
  background-color: transparent !important;
}
::v-deep(.el-table--enable-row-transition .el-table__body td, .el-table .cell) {
  background-color: transparent;
}
.duty {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("./assets/bg.png") no-repeat;
  background-size: 100% 100%;
  .header {
    width: 80%;
    height: 15vh;
    border: 1px solid #00b0f0;
    border-bottom: none;
    font-size: 3.6vw;
    text-align: center;
    text-indent: 2vw;
    line-height: 15vh;
    font-weight: 700;
    letter-spacing: 3vw;
    color: #fff;
  }
  .tableBox {
    position: relative;
    width: 80.1%;
    height: 65%;
    border: 1px solid #00b0f0;
    border-right: none;
  }
  .line {
    position: absolute;
    /* position:fixed; */
    z-index: 9;
    top: 0;
    left: 0;
    height: 1px;
    width: 350px;
    background-color: #00b0f0;
    transform-origin: left;
    transform: rotate(24.2deg);
  }
  .riqi1 {
    position: absolute;
    top: 2%;
    left: 14%;
    z-index: 99;
    font-size: 2vw;
    font-weight: 400;
    color: #ffd969;
  }
  .zhiban {
    position: absolute;
    left: 1%;
    top: 19%;
    z-index: 99;
    font-size: 2vw;
    font-weight: 400;
    color: #ffd969;
  }
  .info1 {
    width: 100%;
    height: 45vh;
    display: flex;
    line-height: 14.87vh;
    font-size: 2.6vw;
    border: 1px solid #00b0f0;
    border-left: none;
    border-bottom: none;
    border-right: none;
    text-align: center;
    color: #fff;
    .item1 {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .user_info {
        padding: 1vw;
        box-sizing: border-box;
        // text-align: justify;
        // span {
        //   display: inline-block;
        //   padding-left: 100%;
        // }
      }
      .box1 {
        width: 100%;
        height: 33.3%;
        line-height: 11vh;
        border-right: 1px solid #00b0f0;
        border-bottom: 1px solid #00b0f0;
      }
      .box2 {
        width: 100%;
        height: 33.3%;
        line-height: 11vh;
        border-right: 1px solid #00b0f0;
        border-bottom: 1px solid #00b0f0;
      }
    }
    .item2 {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: justify;
      .user_info {
        display: flex;
        padding: 1vw 0vw;
        box-sizing: border-box;
        text-align: center;

        .name1 {
          width: 50%;
        }
        .name2 {
          width: 50%;
          margin: 0 1vw;
          // letter-spacing: 1vw;
          // text-justify:distribute-all-lines;
          // padding-left: 100%;
        }
      }

      .box1 {
        width: 100%;
        height: 33.3%;
        line-height: 11vh;
        text-align: center;
        border-right: 1px solid #00b0f0;
        border-bottom: 1px solid #00b0f0;
      }
      .box2 {
        width: 100%;
        height: 33.3%;
        text-align: center !important;
        line-height: 11vh;
        border-right: 1px solid #00b0f0;
        border-bottom: 1px solid #00b0f0;
      }
      .box3 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 33.3%;
        border-right: 1px solid #00b0f0;
      }
    }
  }
  .top {
    border-top: none;
  }
  .bot {
    border-bottom: none;
  }
}
.lp {
  letter-spacing: 2.8vw;
  // padding-left: 2.4vw;
  text-indent: 2.7vw;
}
</style>
